<style scoped="scoped" lang="scss">
    @import "./login.scss";
</style>
<template>
    <view class="content">
		<view class="con_top">
			<view class="top_p">
				<view class="p1">嗨,你好</view>
				<view class="p1 p2">欢迎登录物流平台</view>
			</view>
			<view class="bolang">
				<image src="../../static/img/bo1.png"></image>
			</view>
			<view class="bolang2">
				<image src="../../static/img/bo2.png"></image>
			</view>
		</view>
		<view class="con-info">
			<view class="info-title">用户账号</view>
			<view class="info-input">
				<uni-icon type="contact" size="30" color="#248afd"></uni-icon>
				<input type="text" class="text" v-model="login_data.username" placeholder="用户名">
			</view>
			<view class="info-input info-input2">
				<uni-icon type="locked" size="30" color="#248afd"></uni-icon>
				<input type="text" class="text" password="true" v-model="login_data.password" placeholder="密码">
			</view>
			<view class="login" @tap="bindLogin">登录</view>
			<view class="foget">账号登录 | <navigator class="text3" url="../company_code/company_code?from=忘记密码" >忘记密码？</navigator></view>
		</view>
    </view>
</template>

<script>
	import uniIcon from "@/components/uni-icon.vue"
    import service from '../../service.js';
    import {
        mapState,
        mapMutations
    } from 'vuex'

    export default {
        components: {
			uniIcon
        },
        data() {
            return {
				login_data:{
					username:'',
					password:'',
				},
                positionTop: 0,
				
			}
        },
        computed: mapState(['forcedLogin']),
        methods: {
            ...mapMutations(['login']),
            initPosition() {
                /**
                 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
                 * 反向使用 top 进行定位，可以避免此问题。
                 */
                this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
            },
			//登陆
            bindLogin() {
				let that=this
				uni.request({
					url: that.GLOBAL.host_svr+'/rest/tokens',
					data:that.login_data,
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
					},
					success: (res) => {
						console.log(res)
						if(res.statusCode==404){
							uni.showModal({
								title: '提示',
								content:res.data ,
								showCancel: false,
							});
							return
						}
						if(res){
							uni.setStorage({
								key: 'token',
								data:res.data
							})
							uni.showToast({
								title: '登录成功',
								icon:'success',
								duration: 2000
							})
							
							setTimeout(()=>{
								uni.navigateTo({
								   url: '../main/main'
								})
							},1000)
						}
						
					},
					fail:(error)=>{
						console.log(error)
						uni.showToast({
							title: '系统错误',
							duration: 2000
						});
					}
				});
				
            },
        },
        onLoad() {
            this.initPosition();
        }
    }
</script>

<style>
    .action-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .action-row navigator {
        color: #007aff;
        padding: 0 20upx;
    }

    .oauth-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .oauth-image {
        width: 100upx;
        height: 100upx;
        border: 1upx solid #dddddd;
        border-radius: 100upx;
        margin: 0 40upx;
        background-color: #ffffff;
    }

    .oauth-image image {
        width: 60upx;
        height: 60upx;
        margin: 20upx;
    }
</style>
